<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" href="../admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../admin/css/admin.css" />
	</head>

	<body>
		<div class="page-content-wrap">
				<form class="layui-form">
					<div class="layui-tab" style="margin: 0;">
						<ul class="layui-tab-title">
							<li><a href="../admin/user">用户列表</a></li>
							<li class="layui-this">编辑用户信息</li>

						</ul>
						<div class="layui-tab-content">
							<div class="layui-tab-item"></div>
							<div class="layui-tab-item layui-show">
								<div class="layui-form-item">
									<label class="layui-form-label">用户名：</label>
									<div class="layui-input-block">
										<input type="text" name="username" required lay-verify="required" th:value="${user.username}" placeholder="请输入用户名" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">电话号码：</label>
									<div class="layui-input-block">
										<input type="text" name="phone" required lay-verify="required" th:value="${user.phone}" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
									</div>
								</div>

								<input type="password" name="password"  style="display: none;" th:value="${user.password}" placeholder="请输入密码" >
								<input type="text" name="pageNum"  style="display: none;" th:value="${session.userPageNum}" placeholder="请输入密码" >

								<div class="layui-form-item">
									<label class="layui-form-label">性别：</label>
									<div class="layui-input-block">
										<select name="sex" lay-verify="required">
											<option value="">请选择性别</option>

											<optgroup label="请选择性别" >
												<option value="男" th:if="${user.sex=='男'}" selected="">男</option>
												<option value="女" th:if="${user.sex!='女'}">女</option>
												<option value="女" th:if="${user.sex=='女'}" selected="">女</option>
												<option value="男" th:if="${user.sex!='男'}">男</option>
											</optgroup>
										</select>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">角色：</label>
									<div class="layui-input-block">
										<select name="role" lay-verify="required">
											<option value="">请选择角色</option>
											<optgroup label="请选择角色" >
												<option value="普通用户" th:if="${user.role=='普通用户'}" selected="">普通用户</option>
												<option value="管理员" th:if="${user.role!='管理员'}">管理员</option>
												<option value="管理员" th:if="${user.role=='管理员'}" selected="">管理员</option>
												<option value="普通用户" th:if="${user.role!='普通用户'}">普通用户</option>
											</optgroup>
										</select>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">头像：</label>
									<div>
										<input type="text" name="header_url" id="header_urlText" th:value="${user.header_url}" style="display: none;">
										<img th:if="${user!=null}" th:src="${user.header_url}" width="50" height="50" onclick="updHeaderUrl()" title="点击修改头像" id="image"/>
									</div>
								</div>

                                <input  type="text" name="id" th:value="${user.id}" style="display: none;" >
							</div>
						</div>
					</div>
					<div class="layui-form-item" style="padding-left: 10px;">
						<div class="layui-input-block">
							<button class="layui-btn layui-btn-normal" lay-submit lay-filter="user-edit-from">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
			<input type="file" style="display: none;" id="file" />
		</div>
		<script type="text/javascript">
			var SCOPE = {
				static: '/static',
				index: '/admin/category/index.html',
				add: 'add.html',
				save: '/admin/category/save.html',
				edit: 'add.html',
				updateEdit: '/admin/category/updateedit.html',
				status: '/admin/category/updatestatus.html',
				del: '/admin/category/del.html',
				delAll: '/admin/category/deleteall.html',
				listOrderAll: '/admin/category/listorderall.html'
			}
		</script>
		<script src="../admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../admin/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-1.12.4.min.js"></script>
		<script>
			
			layui.use(['form', 'jquery', 'laydate', 'layer', 'laypage', 'dialog',  'element', 'upload', 'layedit'], function() {
				var form = layui.form(),
					layer = layui.layer,
					$ = layui.jquery,
					laypage = layui.laypage,
					laydate = layui.laydate,
					layedit = layui.layedit,
					element = layui.element(),
					dialog = layui.dialog;

				//获取当前iframe的name值
				var iframeObj = $(window.frameElement).attr('name');

				//监听信息提交
				form.on('submit(user-edit-from)', function(data){
					var headerUrl = data.field.header_url;
					if (headerUrl==null || headerUrl==''){
						layer.msg('请上传头像！！');
						return false;
					}
					$.post('../admin/user/update',data.field,function (result) {
						if (result=='ok'){
							window.location.replace("../admin/user?pageNum="+data.field.pageNum)
						}
					})
					return false;
				});
			});

			$(function () {
				$("#file").change(function () {
					//选择文件
					var filePath = $("#file").val();
					filePath = filePath.toUpperCase();
					//设置上传文件类型
					if (filePath.indexOf(".JPG") != -1 || filePath.indexOf(".BMP") != -1 || filePath.indexOf(".PNG") != -1 || filePath.indexOf(".GIF") != -1 || filePath.indexOf(".JPEG") != -1) {
						var form = new FormData();
						form.append('file', $('#file')[0].files[0]);
						//上传文件
						$.ajax({
							url: '../admin/user/upload',
							type: 'post',
							data: form,
							cache: false,
							//阻止Ajax将参数转成成String类型的键值对，需要设置processData属性为false，
							processData: false,
							//form的enctype="multipart/form-data"才能上传文件。Ajax的默认编码方式是application/x-www-form-urlencoded
							contentType: false,

							success: function (data) {
								if(data!=null){
									$("#header_urlText").val(data)
									$("#image").attr("src", data)
								}else{
									layer.msg('修改头像异常！！');
								}


							}
						});
					} else {
						layer.msg('请选择正确的文件格式！！');
						return false;
					}
				})
			})
			function updHeaderUrl() {
				document.getElementById("file").click();
			}
		</script>
	</body>

</html>